<form class="needs-validation mt-3"
      *ngIf="client"
      [ngClass]="{ 'was-validated': urlForm.submitted }"
      (ngSubmit)="urlForm.form.valid && addClientUrl()"
      novalidate
      #urlForm="ngForm">
    <div class="form-row">
        <div class="col-md">
            <label class="sr-only"
                   for="url">
                URL
            </label>
            <input class="form-control"
                   id="url"
                   name="url"
                   [(ngModel)]="url"
                   [placeholder]="'Please provide a url...'"
                   required
                   #addedUrl="ngModel" />
            <div *ngIf="urlForm.submitted && addedUrl.invalid"
                 class="form-control-feedback text-danger">
                Please select a value.
            </div>
        </div>
        <div class="col-md-1 text-right">
            <button type="submit"
                    class="btn btn-primary m-r-5">
                Add
            </button>
        </div>
    </div>
</form>
<div class="row mt-3">
    <div class="col-12">
        <app-list-view [clientSide]="true"
                       [rowsPerPage]="100"
                       [canFilter]="false"
                       [columns]="columns"
                       [rows]="rows"
                       [defaultSortField]="'url'"
                       [defaultSortDirection]="'Asc'"
                       #clientUrlsList>
        </app-list-view>
    </div>
</div>
<form class="mt-3">
    <div class="form-group">
        <div>
            <button type="submit"
                    class="btn btn-primary m-r-5"
                    (click)="update()">
                Save Changes
            </button>
        </div>
    </div>
</form>
<ng-template let-row="row"
             let-column="column"
             let-value="value"
             #checkboxTemplate>
    <div class="form-check custom-control custom-checkbox">
        <input type="checkbox"
               class="form-check-input custom-control-input"
               [id]="row.id + '-' + column.$$id"
               [checked]="value"
               (change)="checkboxChanged($event, column, row)" />
        <label class="custom-control-label"
               [for]="row.id + '-' + column.$$id">
        </label>
    </div>
</ng-template>
<ng-template #redirectTemplate>
    <span>
        <i class="material-icons align-middle"
           title="URL that tokens can be sent.">
            info
        </i>
        Redirect
    </span>
</ng-template>
<ng-template #corsTemplate>
    <span>
        <i class="material-icons align-middle"
           title="Domain that can make cross origin requests.">
            info
        </i>
        CORS
    </span>
</ng-template>
<ng-template #postLogoutRedirectTemplate>
    <span>
        <i class="material-icons align-middle"
           title="Can redirect to this URL after logout.">
            info
        </i>
        Post Logout Redirect
    </span>
</ng-template>